<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue.js"></script>
		<link rel="stylesheet" href="./lib/animate.css"/>
		<style>
			.ball{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="button" value="快到碗里来" @click="flag=!flag"/>
			<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
				<div class="ball" v-show="flag"></div>
			</transition>
		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					flag: false
				},
				methods: {
					//注意：动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素，是原生的 JS DOM 对象
					//大家可以认为，el是通过document.getElementById('')方式获取到的原生JS DOM对象
					beforeEnter(el){
						//beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在beforeEnter中，设置元素开始动画之前的起始样式
						//设置小球开始动画之前的起始位置
						el.style.transform = "translate(0,0)"
					},
					enter(el,done){
						// el.offsetHeight这句话没有实际作用，但是如果不写，出不来效果
							//可以认为el.offsetHeight会强制动画刷新
						// el.offsetWidth
						el.offsetHeight
						//enter 表示开始之后的样式，这里可以设置小球完成动画之后的，结束的状态
						el.style.transform = "translate(150px,450px)"
						el.style.transition='all 1s ease'
						//这里的done，起始就是afterEnter这个函数，也就是说：done是afterEnter函数的应用
						done()
					},
					afterEnter(el){
						//动画完成之后会调用afterEnter
						console.log('ok')
						this.flag=!this.flag
					}
				}
			})
		</script>
	</body>
</html>
